<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <i th:replace="~{common :: baseUrl}"></i>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">



    <form class="layui-form layui-form-pane" action="">

        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">原料名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <input hidden name="merchantsId" id="merchantsId"  th:value="${merchantsId}">
            <input hidden name="orderId" id="orderId" th:value="${orderId}">


            <div class="layui-inline">
                <label class="layui-form-label">原料类别</label>
                <div class="layui-input-inline">
                    <select name="categoryId" id="categoryId"  lay-filter="categoryId" >
                        <option value="0">全部</option>
                        <option th:each="l : ${foodMaterialCategories}" th:value="${l.id}" th:text="${l.categoryName}" >无</option>

                    </select>
                </div>
            </div>

            <button type="button" class="layui-btn layui-btn-normal" id="selectBut">查询</button>
        </div>




        <!--展示数据-->
        <div>
            <table class="layui-hide" id="purchaseOrders" lay-filter="purchaseOrders" ></table>

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">添加至采购单</button>

                </div>
            </script>
        </div>





    </form>


</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    //JavaScript代码区域
    layui.use(['element','table','form'], function(){
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;



        //表格初始化
        table.render({
            elem: '#purchaseOrders'
            ,url:baseUrl+'food/material/list'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,width: 1200
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', width:120, title: 'ID', sort: true}
                ,{field:'unitPriceString', width:120, title: '采购价格'}
                ,{field:'name', width:150, title: '原料名称'}
                ,{field:'purchaseUnitName', width:120, title: '采购单位'}
                ,{field:'repertoryUnitName', width:150, title: '库存单位'}
                ,{field:'conversionName', width:120, title: '规格换算'}
                ,{field:'nowRepertory', width:120, title: '当前库存' }

            ]]
            ,page:true
            ,where: {
            shopId:$("#merchantsId").val(),
            name:$("#name").val(),

                materialCategoryId:$("#categoryId").val()


        } //设定异步数据接口的额外参数

    });


        //监听一级分类下拉列表的改变
        form.on('select(categoryId)', function(data){
            // console.log(data.elem); //得到select原始DOM对象
            // console.log(data.value); //得到被选中的值
            // console.log(data.othis); //得到美化后的DOM对象
            table.reload('purchaseOrders', {
                url: baseUrl+'food/material/list'
                ,where: {
                    shopId:$("#merchantsId").val(),
                    name:$("#name").val(),
                    materialCategoryId:$("#categoryId").val()
                } //设定异步数据接口的额外参数

            });

        });


        //查询指定条件
        $("#selectBut").click(function () {

            table.reload('purchaseOrders', {
                url: baseUrl+'food/material/list'
                ,where: {
                    shopId:$("#merchantsId").val(),
                    name:$("#name").val(),
                    materialCategoryId:$("#categoryId").val()
                } //设定异步数据接口的额外参数

            });


        });


        //表头工具栏事件
        table.on('toolbar(purchaseOrders)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':

                    var data = checkStatus.data;
                    var jsonData = JSON.stringify(data);

                    //发送ajax请求  编辑APP信息
                        $.ajax({
                        url:baseUrl+"purchase/orders/addMap",
                        data:'{"data":'+jsonData+',"orderId":"'+$("#orderId").val()+'"}',
                        type:"post",
                        dataType:"json",
                        success:function (result) {
                            if (result.code==0){
                                layer.open({
                                    title: '选择菜品原料'
                                    ,content: '添加成功！'
                                    ,time: 1000
                                    ,end:function () {
                                        //当你在iframe页面关闭自身时
                                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                        parent.layer.close(index); //再执行关闭
                                    }
                                });
                            }else {
                                layer.open({
                                    title: '编辑菜品信息'
                                    ,content: result.msg
                                });
                            }
                        },
                        error:function () {
                            layer.msg("服务器原地爆炸,请联系管理员!!!");
                        },
                       contentType: "application/json;charset=utf-8"
                    })

                    break;


            };
        });








    });
</script>
</body>
</html>
